<template>
  <view class="video-page">
    <image class="icon-back" src="../../static/back.png" mode="aspectFit" @tap="sheep.$router.back()"></image>
    <video v-if="goodsInfo.video" id="vedio" :src="goodsInfo.video" @play="play" @click="test(123)"> </video>
    <image
      class="video-img"
      :src="goodsInfo.image"
      mode="aspectFit"
      :class="{ active: isPlay }"
	  :style="{ bottom : videoImgBottom }"
	  @load="shopImgOnload"
    ></image>
	<view class="play" v-if="!isPlay && goodsInfo.video"  @click="playFn">
		<i class="iconfont icon-bofang"></i>
	</view>
   <!-- <image
      
      src="../../static/play.gif"
      mode="aspectFit"
      
     
    ></image> -->
    <image class="to-detial" src="../../static/xx.png" mode="aspectFit" @tap="sheep.$router.go('/pages/goods/index?id=' + goodsInfo.id)"></image>
    <view v-if="goodsInfo.params" class="video-detail">
      <view>{{ goodsInfo.name }}</view>
      <view v-for="(item, index) in (goodsInfo.params || [])" :key="'p' + index" >{{ item.title }}：{{ item.content }}</view>
    </view>
    <view class="video-op">
	  <view>
		<image src="../../static/home.png" mode="aspectFit" @tap="sheep.$router.go('/pages/index/index')"></image>
	  </view>
	  <view>
		  <uni-badge size="small" :text="goodsInfo.like || 0" absolute="rightTop" type="warning">
			<image src="../../static/zan.png" mode="aspectFit" @tap="likeGoods"></image>
		  </uni-badge>
	  </view>
	  <view>
		<image src="../../static/zhuanfa.png" mode="aspectFit"></image>
	  </view>
    </view>
  </view>
</template>
<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { onMounted, onUnmounted, ref } from 'vue';
  const isPlay = ref(false);
  const refVideo = ref();
  const goodsInfo = ref({})
  const videoSrc = ref()
  const goodsId  = ref()
  onLoad(async (options) => {
	  goodsId.value = options.id
	  loadData()
  });
  
  function loadData() {
	sheep.$api.goods.detail(goodsId.value).then((res) => {
	  if (res.code === 1) {
		goodsInfo.value = res.data;
	  }
	});
  }

  function play() {
    isPlay.value = true;
  }

  function playFn() {
    uni.createVideoContext('vedio').play();
  }
  
  function likeGoods() {
	  sheep.$api.goods.like(goodsInfo.value.id).then(res => {
		  loadData()
	  })
  }
  
  function test() {
	if (isPlay.value) {
		uni.createVideoContext('vedio').pause()
	} else {
		uni.createVideoContext('vedio').play()
	}
	isPlay.value = !isPlay.value
  }
  
  const videoImgBottom = ref('50%')
  function shopImgOnload(e) {
	  const {width, height} = e.detail;
	  uni.getSystemInfo({
		success: (res) => {
		  const cWidth = res.windowWidth
		  const cHeight = (cWidth * height) / width
		  videoImgBottom.value = res.windowHeight / 2 - cHeight * 0.3333 + 'px'
		},
	  });
  }
</script>
<style lang="scss" scoped>
	.video-page {
		position: absolute;
		height: 100%;
		width: 100%;
	}
  .icon-back {
    position: absolute;
    top: 40rpx;
    left: 40rpx;
    z-index: 3;
    width: 50rpx;
    height: 50rpx;
  }
  .to-detial {
    position: absolute;
    width: 200rpx;
    height: 200rpx;
    z-index: 3;
    bottom: 400rpx;
    left: 0;
  }
  .video-op {
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 40rpx;
    bottom: 500rpx;
    z-index: 3;
	image {
      width: 100rpx;
      height: 100rpx;
	}
    & > view {
      margin: 40rpx 0;
    }
  }
  .video-detail {
    position: absolute;
    left: 30rpx;
    bottom: 80rpx;
    z-index: 3;
    color: #ffffff;
  }
  .play {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 4;
	i {
		font-size: 100rpx;
		color: #fff;
		opacity: 0.9;
	}
  }
  video {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .video-img {
    position: absolute;
    z-index: 2;
    width: 100%;
    right: 0;
    transition: all 1s;
    &.active {
      width: 200rpx;
      height: 200px;
      bottom: 20rpx !important;
      right: 20rpx;
    }
  }
</style>
